<template>
	<view    class="content">
			
	
		<uni-search-bar @confirm="search" :focus="true"  >
					</uni-search-bar>
					<uni-card padding="10" spacing="0" v-if="recordList.length==0">
						<view class="grid-item-box">
							暂无数据
							
						</view>
					</uni-card>
					<uni-card padding="0" spacing="0" v-for="(item,index) in recordList">
						
						<view v-for="(value,key) in item.value">
						
							<uni-row class="demo-uni-row"  v-if="value.fieldType===5">
								
								<uni-col :span="4">
									<label >{{value.fieldName}}</label>
								
								</uni-col>
								<uni-col :span="1">
									<text>：</text>
								</uni-col>
								<uni-col :span="19">
									<uni-grid :column="2" :show-border="false" :square="false" >
										<uni-grid-item v-for="url in JSON.parse(value.value)" >
											
											<view class="grid-item-box">
												<image class="image" :src="imageUrl+url" mode="aspectFill"  @click="showImage(imageUrl+url)"/>
												
												
											</view>
										</uni-grid-item>
									</uni-grid>
								</uni-col>
							
							</uni-row>
							<uni-row class="demo-uni-row"  v-else-if="value.fieldType===6">
								<uni-col :span="4">
									<label >{{value.fieldName}}</label>
								
								</uni-col>
								<uni-col :span="1">
									<text>：</text>
								</uni-col>
								<uni-col :span="19">
									<uni-grid :column="1" :show-border="false" :square="false">
										<uni-grid-item v-for="url in JSON.parse(value.value)">
											<view class="grid-item-box">
												<video  :src="imageUrl+url"   ></video>
											</view>
										</uni-grid-item>
									</uni-grid>
								</uni-col>
							
							</uni-row>
							
							<uni-row class="demo-uni-row"  v-else>
								<uni-col :span="4">
									<label >{{value.fieldName}}</label>
								
								</uni-col>
								<uni-col :span="1">
									<text>：</text>
								</uni-col>
								<uni-col :span="19">
									<text>{{value.value}}</text>
								</uni-col>
							
							</uni-row>
						</view>
						
						
						<view  class="card-actions">
							<view class="card-actions-item" @click="shareClick(item)">
								<uni-icons type="redo" size="18" color="#999"></uni-icons>
								<text class="card-actions-item-text">分享</text>
							</view>
							<view class="card-actions-item" @click="editClick(item.id)">
								<uni-icons type="compose" size="18" color="#999"></uni-icons>
								<text   class="card-actions-item-text">修改</text>
							</view>
							<view class="card-actions-item" @click="deleteClick(item.id,index)">
								<uni-icons type="trash" size="18" color="#999"></uni-icons>
								<text class="card-actions-item-text">删除</text>
							</view>
						</view>
					</uni-card>
				
					
		<!-- 普通弹窗 -->
					<uni-popup ref="popup" background-color="#fff" >
						<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"><text
								class="text">popup 内容</text></view>
					</uni-popup>
					
		<uni-fab ref="fab"  horizontal="right" vertical="bottom"
					direction="horizontal" @fabClick="fabClick" />
		<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" style="background-color: #fff;">
			<view class="popup-content">
				<view>
					<video v-if="!isImage" :src="bigVedio"   controls style="width:480px;height:480px;" ></video>
					<image v-if="isImage" style="width:480px;height:480px;"  :src="bigImage" mode="aspectFit"  />
					
				</view>
				<view>
					<button class="mini-btn"  type="default" size="mini" @click="hidePopup">关闭</button>
				</view>
				
				
			</view>
			
			
		</uni-popup>
	</view>
</template>

<script>
	import http from '@/store/http.js'
	import constant from '@/store/constant.js'
	import common from '@/store/common.js'
        export    default    {
                data() {
					return    {
						type:5,
						subType:0,
						imageUrl:constant.baseImageUrl,
						pageNum:1,
						pageSize:10,
						pageCount:1,
						searchValue:"",
						recordList:[],
					
					
						toolsContent:[
							],
						isImage:true,
						bigImage:"",
						bigVedio:"",	
					}
                },
                onLoad() {
					
						
						
                },
				onShow(){
					uni.showLoading({
						title:"数据加载中..."
					})
					this.$data.pageNum=1;
					// this.loadListData();
					var templateId=uni.getStorageSync('templateId');
					var self=this;
				
					this.$data.subType=templateId;
					var status=common.synchronousStatus(this.$data.type,this.$data.subType);
					
					if(status){
						var version =common.getVersion(this.$data.type);
						
						http.post("/api/version/getDetail",{version:version,type:self.$data.type},(result)=>{
						
							if(result.status){
								if(result.data.version>version){
									common.setVersion(self.$data.type,result.data.version)
								}
								if(result.data.list.length>0){
									var params={
										pageNum:1,
										pageSize:9999,
										// templateId:templateId,
										idList:result.data.list
										
									};
									http.post("/api/template/listRecordForPage",params,(data)=>{
										if(data.status){
											
											var dataMap={};
											for(var i=0;i<data.data.data.length;i++){
												if(undefined==dataMap[data.data.data[i].templateId]){
													dataMap[data.data.data[i].templateId]=[];
												}
												dataMap[data.data.data[i].templateId].push(data.data.data[i]);
											}
											for(var key in dataMap ){
												common.setCacheData(self.$data.type,key,dataMap[key]);
												
											}
											
											var newData=common.getCacheDataForPage(self.$data.type,self.$data.subType,self.$data.searchValue,self.$data.pageNum,self.$data.pageSize);
											
											self.$data.recordList=newData;
											uni.hideLoading();
										}
									});
									
								}else{
									uni.hideLoading()
								}
							}else{
								uni.hideLoading()
							}
						});
					}else{
						uni.hideLoading()
					}
					
					var cacheData=common.getCacheDataForPage(this.$data.type,this.$data.subType,this.$data.searchValue,this.$data.pageNum,this.$data.pageSize);
					
					self.$data.recordList=cacheData;
				},
				onReachBottom(){
					var self=this;
					this.$data.pageNum++;
					var templateId=uni.getStorageSync('templateId');
				
				
					this.$data.subType=templateId;
					var cacheData=common.getCacheDataForPage(this.$data.type,this.$data.subType,this.$data.searchValue,this.$data.pageNum,this.$data.pageSize);
					if(cacheData.length>0){
						cacheData.forEach(item=>{
							self.$data.recordList.push(item)
						})
						
					}else{
						this.$data.pageNum--;
						this.showContentToast("没有更多数据了");
					}
					
				
					
				},
                methods: {
					hidePopup(){
						this.$refs.popup.close();
					},
					showImage(url){
						this.$data.isImage=true;
						this.$data.bigImage=url;
						this.$refs.popup.open()
					},
					showVideo(url){
						this.$data.isImage=false;
						this.$data.bigVedio=url;
						this.$refs.popup.open()
					},
					search(res){
						this.$data.searchValue=res.value;
						this.$data.pageNum=1;
						var cacheData=common.getCacheDataForPage(this.$data.type,this.$data.subType,this.$data.searchValue,this.$data.pageNum,this.$data.pageSize);
						this.$data.recordList=cacheData;
						
					},
					loadListData(){
						var self=this;
						var templateId=uni.getStorageSync('templateId');
						var params={
							pageNum:this.$data.pageNum,
							pageSize:this.$data.pageSize,
							keyword:this.$data.searchValue,
							templateId:templateId
						};
						if(this.$data.pageNum==1){
							self.$data.recordList=[];
						}
						http.post("/api/template/listRecordForPage",params,(data)=>{
							if(data.status){
								data.data.data.forEach(item=>{
									self.$data.recordList.push(item);
								})
								
								self.$data.pageCount=data.data.pages;
							}
						});
					},
					shareClick(item){
						var self=this;
						var url=constant.frontUrl+"#/pages/template/recordShare?id="+item.id;
						uni.setClipboardData({
							data: url,
							success: function () {
								self.showContentToast("已复制分享地址到剪切板");
							}
						});
					},
					editClick(id){
						uni.setStorageSync('recordId', id);
						uni.redirectTo({
							url:"/pages/template/editRecord"
						})
					},
					deleteClick(id,index){
						
						
						
						var self=this;
						
						this.showContentModal("提示","确定要删除当前记录吗？",(confirm)=>{
							if(confirm){
								var url="/api/template/deleteRecord?recordId="+id;
								http.get(url,(data)=>{
									if(data.status){
									
										common.deleteCacheItemData(self.$data.type,self.$data.subType,id);
										
										var list=[];
										for(var i=0;i<self.$data.recordList.length;i++){
											if(i!=index){
												list.push(self.$data.recordList[i]);
											}
										}
										
										self.$data.recordList=list;
									
									}else{
										self.showContentToast(data.msg);
									}
								});
							}else{
								
							}
							
						});
					},
					fabClick(){
						uni.redirectTo({
							url:"/pages/template/createRecord"
						})
					},
					showContentToast(title){
						uni.showToast({
						  title: title,
						  icon: "none"
						})
					},
					showContentModal(title,content,callback){
						uni.showModal({
							title: title,
							content: content,
							success: function (res) {
								callback(res.confirm);
							}
						});
					},
                }
        }
</script>

<style    scoped>
      .demo-uni-row{
      	padding-left: 10px;
		padding-top: 5px;
		font-size: 16px;
      }
		
		.demo-uni-row {
			margin-bottom: 5px;
			/* QQ、抖音小程序文档写有 :host，但实测不生效 */
			/* 百度小程序没有 :host，需要设置block */
			/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
			display: block;
			/* #endif */
		}
		
		/* 支付宝小程序没有 demo-uni-row 层级 */
		/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
		/* #ifdef MP-ALIPAY || MP-WEIXIN */
		/deep/ .uni-row {
			margin-bottom: 10px;
		}
		/* #endif */
		
		.demo-uni-col {
			height: 36px;
			border-radius: 4px;
		}
		
		.dark_deep {
			background-color: #99a9bf;
		}
		
		.dark {
			background-color: #d3dce6;
		}
		
		.light {
			background-color: #e5e9f2;
		}
		
		
		
		.container {
				overflow: hidden;
			}
		
			.custom-cover {
				flex: 1;
				flex-direction: row;
				position: relative;
			}
		
			.cover-content {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 40px;
				background-color: rgba($color: #000000, $alpha: 0.4);
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-left: 15px;
				font-size: 14px;
				color: #fff;
			}
		
			.card-actions {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
				height: 45px;
				border-top: 1px #eee solid;
				padding-top: 2px;
			}
			.card-actions-item {
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.card-actions-item-text {
				font-size: 14px;
				color: #666;
				margin-left: 5px;
			}
			.cover-image {
				flex: 1;
				height: 150px;
			}
			.no-border {
				border-width: 0;
			}
			
			.grid-item-box {
					flex: 1;
					
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 5px 0;
				}
				
			.image {
					width: 150px;
					height: 150px;
				}
				.popup-content {
						@include flex;
						align-items: center;
						justify-content: center;
						padding: 15px;
						height: 500px;
						width:500px;
						background-color: #fff;
						text-align: center;
					}
</style>